<template>

  <van-nav-bar title="注册"/>

  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="reactiveFrom.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ pattern, message: '请填写用户名' }]"
      />
      <van-field
        v-model="reactiveFrom.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ pattern, message: '请填写密码' }]"
      />

      <van-field
        v-model="reactiveFrom.passwordok"
        type="password"
        name="password"
        label="确认密码"
        placeholder="确认密码"
        :rules="[{ validator, message: '请再次填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        @click="submit"
      >
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { reactive } from "vue";
const reactiveFrom = reactive({
  username:'',
  password:'',
  passwordok:'',
});
// 验证
let pattern = /^[a-zA-Z0-9]{3,9}$/;

const validator = (val) => {
  if (val != reactiveFrom.password) {
    return false;
  }
  return true;
};

import { zheceApi } from "@/api/api";
import { showToast } from "vant";
import {useRouter }from 'vue-router'
let router=new useRouter()

const submit = () => {
  zheceApi(reactiveFrom.username, reactiveFrom.password).then((res) => {
    console.log("注册", res);
    if (res.data.code == 0) {
      showToast({
        type:'success',
        message: "注册成功",
        duration:2000,
        onClose(){
          router.push('/login')
        }
      });
    }else{
          showToast({
            type:'fail',
            message:'用户名重复',
            duration:2000
          })

    }
  });
};
</script>

<style lang="scss" scoped>
</style>